<template xlang="wxml" minapp="mpvue">
  <ul class="mui-table-view"
      v-if="direction == 'right'">
    <li class="mui-table-view-cell mui-media">
      <a hover-class='none'>
        <img class="mui-media-object mui-pull-right"
             :src="url"
             v-if="url">
        <p v-else
           class="mui-media-object mui-pull-right"> {{text}} </p>
        <div class="mui-media-body">
          {{ title }}
          <p class='mui-ellipsis'>{{ detail }}</p>
        </div>
      </a>
    </li>
  </ul>
  <ul class="mui-table-view"
      v-else-if="direction == 'left'">
    <li class="mui-table-view-cell mui-media">
      <a hover-class='none'>
        <img class="mui-media-object mui-pull-left"
             :src="url">
        <div class="mui-media-body">
          {{ title }}
          <p class='mui-ellipsis'>{{ detail }}</p>
        </div>
      </a>
    </li>
  </ul>
  <ul class="mui-table-view mui-table-view-chevron"
      @click="$emit('response')"
      v-else>
    <li class="mui-table-view-cell mui-media">
      <a class="mui-navigate-right">
        <img class="mui-media-object mui-pull-left"
             :src="url">
        <div class="mui-media-body">
          {{ title }}
          <!-- <p class='mui-ellipsis'>{{ detail }}</p> -->
        </div>
      </a>
    </li>
  </ul>
</template>

<script>
// 图文列表 文本列表 图片左右 direction: left,right,chevron:右侧带导航箭头
export default {
  props: ['direction', 'title', 'detail', 'text', 'url'],
  data () {
    return {
      url: this.url || ''
    }
  }
}
</script>

<style lang='scss' scoped>
.mui-table-view {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  background-color: #fff;
  .mui-ios .mui-table-view-cell {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .mui-media,
  .mui-media-body {
    overflow: hidden;
  }
  .mui-table-view-cell {
    position: relative;
    overflow: hidden;
    padding: 11rpx 0;
    -webkit-touch-callout: none;
  }
  .mui-table-view-cell > a:not(.mui-btn) {
    position: relative;
    display: block;
    overflow: hidden;
    // margin: 0 15px;
    padding: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: inherit;
  }
  .mui-media-object.mui-pull-right {
    margin-left: 10px;
  }

  .mui-media-object {
    line-height: 42px;
    max-width: 42px;
    height: 42px;
  }
  .mui-media-object.mui-pull-right {
    max-width: 120rpx;
    text-align: right;
    color: #333;
  }
  .mui-pull-right {
    float: right;
  }
  .mui-table-view-cell p {
    margin-bottom: 0;
  }
  .mui-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  p {
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 10px;
    color: #8f8f94;
  }
  .mui-table-view-cell:before {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: #eee;
  }
  .mui-media-object.mui-pull-left {
    margin-right: 10px;
  }
  .mui-pull-left {
    float: left;
  }
  &.mui-table-view-chevron .mui-table-view-cell {
    padding-right: 65px;
  }
  &.mui-table-view-chevron .mui-table-view-cell > a:not(.mui-btn) {
    margin-right: -65px;
  }
  .mui-navigate-right {
    .mui-media-body {
      line-height: 84rpx;
    }
  }
  .mui-navigate-right:after,
  .mui-push-right:after {
    width: 16rpx;
    height: 28rpx;
    background: url('../images/my/right_icon.png');
    background-size: cover;
  }
  .mui-navigate-right:after,
  .mui-push-left:after,
  .mui-push-right:after {
    position: absolute;
    content: '';
    right: 15px;
    top: 50%;
    display: inline-block;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-decoration: none;
    color: #bbb;
    -webkit-font-smoothing: antialiased;
  }
}
</style>